<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WEB SSH TERMINAL</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/xterm.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/dist/css/bootstrap.min.css}"/>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">工具栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#" class="new_session">New Session</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid" style="margin-top: 70px;">
        <div id="terminal" style="width: 100%;height: 100%"></div>
    </div>


    <div class="modal fade" id="sshConnectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 440px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">SSH CONNECT</h4>
                </div>
                <div class="modal-body">
                    <form class="bs-example bs-example-form" role="form" style="width: 400px;">
                        <div class="input-group" style="margin:5px 0 5px 0;">
                            <span class="input-group-addon" id="basic-addon1">主机:</span>
                            <input type="text" class="form-control" id="host" aria-describedby="basic-addon1" placeholder="请输入主机IP">
                        </div>
                        <div class="input-group" style="margin:5px 0 5px 0;">
                            <span class="input-group-addon" id="basic-addon2">端口:</span>
                            <input type="text" class="form-control" id="port" aria-describedby="basic-addon2" placeholder="请输入端口号">
                        </div>
                        <div class="input-group" style="margin:5px 0 5px 0;">
                            <span class="input-group-addon" id="basic-addon3">账号:</span>
                            <input type="text" class="form-control" id="userName" aria-describedby="basic-addon3" placeholder="请输入账号">
                        </div>
                        <div class="input-group" style="margin:5px 0 5px 0;">
                            <span class="input-group-addon" id="basic-addon4">密码:</span>
                            <input type="password" class="form-control" id="password" aria-describedby="basic-addon4" placeholder="请输入密码">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-connect">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/xterm.js}" charset="utf-8"></script>
    <script th:src="@{/js/webssh.js}" charset="utf-8"></script>
    <script th:src="@{/js/easy.js}" charset="utf-8"></script>
</body>
</html>